<template>
  <el-dialog title="上传" :close-on-click-modal="false" width="400px">
    <el-upload
      ref="dragUploadRef"
      action="#"
      :limit="1"
      :on-exceed="handleExceed"
      :auto-upload="false"
      drag
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖曳至此处 或 <em>点击上传</em></div>
      <div class="el-upload__text">每次仅能上传一个文件!</div>
    </el-upload>
    <template #footer>
      <el-button
        style="float: left"
        type="primary"
        @click="changeDragUploadDialogVisible()"
        >确认</el-button
      >
      <el-button @click="changeDragUploadDialogVisible()">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, ref } from "vue";
import { ElMessage } from "element-plus";

const changeDragUploadDialogVisible = inject(
  "changeDragUploadDialogVisible"
) as () => void;

const dragUploadRef = ref();

const handleExceed = (files: File[]) => {
  ElMessage.warning("当前选择文件覆盖了之前选择的文件!");
  dragUploadRef.value.clearFiles();
  dragUploadRef.value.handleStart(files[0]);
};
</script>

<style scoped></style>
